<script setup>
import OImage from "../setting/Images.vue";
import AlphaColor from "../setting/AlphaColor.vue";
import Editor from "../setting/Editor.vue";
import Slider from "../setting/Slider.vue";
import Color from "../setting/Color.vue";
import TableControl from "./components/TableControl.vue";
const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:config", "change"]);
const form = ref({
  $position: { top: 0, left: 0 },
  $size: { width: 375, height: 50 },
  $positionType: "relative",
  $removeable: true,
  borderRadius: 0,
  bgShow: false,
  textPosition: { top: 10, left: 10 },
  textSize: { width: 345, height: 30 },
  headerLsit: [],
  tableList: [],
  showSearch: 1,
  placeholder: "请输入",
  btnText: "按钮",
  btnSize: 12,
  btnColor: "#fff",
  btnRadius: 0,
  btnBgImg: "",
  btnBgColor: "",
  keyList: [],
  tableHeight: 300,
});

const typeList = [
  { label: "默认", key: "relative" },
  { label: "浮动", key: "absolute" },
];

const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const changePositionType = () => {
  detail.value.$position = { left: 0, top: 0 };
  onChange();
};

const onChange = (val) => {
  detail.value = detail.value;
};
const randomString = (e) => {
  e = e || 32;
  let t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
    a = t.length,
    n = "";
  for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
  return n;
};

// Dialog部分
const showDialog = ref(false);
const dialogFormRef = ref();
const itemIndex = ref("");
const dialogForm = ref({
  label: "",
  key: "",
});
const dialogRules = ref({
  label: [{ required: true, message: "请选输入值", trigger: "change" }],
});

const setHeaderList = () => {
  showDialog.value = true;
  let key = randomString(6);
  dialogForm.value.key = key;
  dialogForm.value[key] = "";
};

const toEdit = (idx) => {
  itemIndex.value = idx;
  dialogForm.value = JSON.parse(JSON.stringify(detail.value.headerLsit[idx]));
  showDialog.value = true;
};

const delSelectItem = (idx, item) => {
  ElMessageBox.confirm(`确认删除？`, "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    detail.value.headerLsit.splice(idx, 1);
    detail.value.headerLsit.forEach((el) => {
      delete item[el.key];
    });
    detail.value.keyList.find((el, idx) => {
      if (el == item.key) {
        detail.value.keyList.splice(idx, 1);
      }
    });
    onChange();
  });
};
const onSubmit = () => {
  if (detail.value.headerLsit.length === 0) {
    detail.value.headerLsit.push(JSON.parse(JSON.stringify(dialogForm.value)));
  } else {
    if (
      detail.value.headerLsit.find((item) => {
        if (item.label == dialogForm.value.label) {
          return true;
        }
      })
    ) {
      ElMessage.warning("值重复请重新填写");
      return;
    }
    if (String(itemIndex.value)) {
      detail.value.headerLsit.splice(
        itemIndex.value,
        1,
        JSON.parse(JSON.stringify(dialogForm.value))
      );
    } else {
      detail.value.headerLsit.push(JSON.parse(JSON.stringify(dialogForm.value)));
    }
  }
  detail.value.keyList.push(dialogForm.value.key);
  let headerLsit = detail.value.headerLsit;

  headerLsit.forEach((item) => {
    console.log("[ dialogForm.value.key ]", dialogForm.value.key);
    item[dialogForm.value.key] = "";
  });
  if (detail.value.keyList.length) {
    console.log('[ headerLsit ]', headerLsit)
    detail.value.keyList.forEach((item) => {
      console.log('[ item ]', item)
      headerLsit[headerLsit.length-1][item] = "";
    });
  }

  console.log("[ headerLsit ]", headerLsit);
  detail.value.headerLsit = headerLsit;
  onClose();
};
const onClose = () => {
  showDialog.value = false;
  itemIndex.value = "";
  dialogFormRef.value.resetFields();
  dialogForm.value = {
    label: "",
    key: "",
  };
  onChange();
};
// 列表
const dialogMessage = ref({
  showTableList: false,
});
const confirm = (type, val) => {
  console.log('[ val ]', val)
  detail.value.tableList = val;
  cancel(type);
  onChange();
};
const cancel = (type) => {
  dialogMessage.value[type] = false;
  onChange();
};

onMounted(() => {
  onChange();
});
</script>
<template>
  <el-form :model="detail" label-width="auto" :disabled="disabled">
    <!-- <el-form-item label="位置类型">
      <el-radio-group
        v-model="detail.$positionType"
        @change="changePositionType"
      >
        <el-radio v-for="item in typeList" :label="item.key">{{
          item.label
        }}</el-radio>
      </el-radio-group>
    </el-form-item> -->
    <!-- <el-form-item label="选项名称">
      <el-input v-model="input" placeholder="请输入选项名称" />
    </el-form-item> -->
    <el-form-item label="展示类型:" prop="type">
      <el-radio-group v-model="detail.$positionType" @change="onChange">
        <el-radio v-for="item in typeList" :label="item.key">{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="搜索框">
      <el-radio-group v-model="detail.showSearch" @change="onChange">
        <el-radio :label="1">显示</el-radio>
        <el-radio :label="0">隐藏</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="按钮文字">
      <el-input v-model="detail.btnText" placeholder="请输入按钮文字" />
    </el-form-item>
    <Slider
      v-model="detail.btnSize"
      name="按钮文字大小"
      :min="12"
      :max="30"
      @change="onChange"
    />
    <Slider
      v-model="detail.btnRadius"
      name="按钮圆角"
      :min="0"
      :max="200"
      @change="onChange"
    />
    <Color
      v-model="detail.btnColor"
      name="按钮文字颜色"
      tip="描述文字"
      @change="onChange"
    />
    <OImage
      v-model="detail.btnBgImg"
      v-model:size="detail.$size"
      v-model:show="detail.bgShowImg"
      name="搜索按钮"
      @change="onChange"
    />
    <el-form-item label="提示文字">
      <el-input v-model="detail.placeholder" placeholder="请输入提示文字" />
    </el-form-item>
    <el-form-item label="选项值">
      <div style="width: 100%">
        <el-button type="primary" link @click="setHeaderList()">添加表头</el-button>
      </div>
      <div class="_select-box" v-show="detail.headerLsit.length">
        <div class="_item_text" v-for="(item, idx) in detail.headerLsit" :key="idx">
          <span @click="toEdit(idx)">{{ item.label }}</span>
          <el-icon :size="18" @click="delSelectItem(idx, item)"><Close /></el-icon>
        </div>
      </div>
    </el-form-item>

    <el-form-item label="设置表格">
      <div style="width: 100%">
        <el-button type="primary" link @click="dialogMessage.showTableList = true"
          >去设置</el-button
        >
      </div>
    </el-form-item>

    <el-form-item label="显示限制">
      <el-select v-model="value" placeholder="请选择显示限制" @change="onChange">
        <el-option
          v-for="item in detail.headerLsit"
          :key="item.label"
          :label="item.label"
          :value="item.label"
        />
      </el-select>
    </el-form-item>
    <Slider
      v-model="detail.tableHeight"
      name="表格高度"
      :min="300"
      :max="800"
      @change="onChange"
    />
    <el-form-item label="值">
      <el-select v-model="value" placeholder="值" @change="onChange">
        <el-option
          v-for="item in detail.headerLsit"
          :key="item.key"
          :label="item.label"
          :value="item.key"
        />
      </el-select>
    </el-form-item>

    <Slider
      v-model="detail.taskSpace"
      name="文字大小"
      :min="12"
      :max="20"
      @change="onChange"
    />
    <Color v-model="detail.color" name="文字颜色" tip="描述文字" @change="onChange" />

    <OImage
      v-model="detail.bg"
      v-model:size="detail.$size"
      v-model:show="detail.bgShow"
      name="名称后缀"
      @change="onChange"
    />
  </el-form>
  <Dialog
    :model-value="showDialog"
    title="设置表头"
    :width="500"
    @confirm="onSubmit"
    @close="onClose"
  >
    <el-form
      ref="dialogFormRef"
      :model="dialogForm"
      :rules="dialogRules"
      label-width="80px"
    >
      <el-form-item label="值" prop="label">
        <el-input v-model="dialogForm.label" />
      </el-form-item>
    </el-form>
  </Dialog>
  <TableControl
    :showDialog="dialogMessage.showTableList"
    :headerLsit="detail.headerLsit"
    @confirm="confirm"
    @cancel="cancel"
  ></TableControl>
</template>

<style lang="scss" scoped>
._select-box {
  display: block;
  align-items: center;
}
._item_text {
  display: flex;
  margin-bottom: 5px;
  align-items: center;
  span {
    display: inline-block;
    background: #ddd;
    line-height: 20px;
    width: 200px;
    text-align: center;
  }
  .el-icon {
    margin-left: 5px;
    cursor: pointer;
  }
}
</style>
